<template>
  <div class="printer-w" :class="{ 'printer-row': direction == 'row' }">
    <a-button v-if="showDom" type="text" @click="openUrl">
      <span>打印说明</span>
      <icon-question-circle />
    </a-button>
    <div>
      <slot></slot>
    </div>
    <div class="flex-c bridge-label">
      <!-- 云主机 -->
      <slot name="ipUrl">
        <p>选择云主机：</p>
      </slot>
      <a-select v-model="printUrl" @change="onloadCLodopJS" value-key="url" size="small" :style="{ width: selectWidth + 'px' }" :trigger-props="{ autoFitPopupMinWidth: true }">
        <a-option v-for="(item, index) in urlList" :key="index" :value="item" :label="(item.type === 1 ? '按IP地址：' : '按本机方式：') + item.url" />
      </a-select>
    </div>
    <div class="flex-c bridge-label" v-if="printUrl.type === 1">
      <!-- 端桥 -->
      <slot name="bridgelabel">
        <p>选择端桥：</p>
      </slot>

      <a-select v-model="bridgeVal" @change="createBridgeSubPrinterSelectList" size="small" :style="{ width: selectWidth + 'px' }">
        <a-option v-for="(item, index) in bridgeList" :key="index" :value="item.value" :label="item.name" />
      </a-select>

      <!-- <select id="Select02" @change="createBridgeSubPrinterSelectList" :style="{ width: selectWidth + 'px' }"></select> -->
      <icon-refresh class="highlight cursor" style="margin-left: 20px" @click="onloadCLodopJS" />
    </div>
    <div class="flex-c">
      <!-- 端桥 -->
      <slot name="printerlabel">
        <p>选择端桥下的普通打印机：</p>
      </slot>
      <a-select v-model="printerVal" size="small" :style="{ width: selectWidth + 'px' }">
        <a-option v-for="(item, index) in printerList" :key="index" :value="item.value" :label="item.name" />
      </a-select>
      <!-- <select id="Select03" :style="{ width: selectWidth + 'px' }"></select> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue'
  onMounted(() => {
    onloadCLodopJS()
  })
  const props = defineProps({
    selectWidth: {
      type: [String, Number],
      default: 300,
    },
    direction: {
      type: String,
    },
    showDom: {
      type: Boolean,
      default: true,
    },
  })
  const urlList = [
    {
      url: 'https://printeryfn.selleroa.com:8443/CLodopfuncs.js',
      type: 1,
    },
    {
      url: 'http://localhost:8000/CLodopfuncs.js',
      type: 2,
    },
    {
      url: 'http://127.0.0.1:8000/CLodopfuncs.js',
      type: 2,
    },
  ]
  const printUrl = ref<any>({
    url: 'https://printeryfn.selleroa.com:8443/CLodopfuncs.js',
    type: 1,
  })
  const bridgeVal = ref()
  const bridgeList = ref<Array<any>>([])
  const printerVal = ref()
  const printerList = ref<Array<any>>([])
  let Lodop: any = null
  const emit = defineEmits(['getLodop'])

  // 打开文档说明
  function openUrl() {
    window.open('https://help-doc.selleroa.com/web/#/5/29', '_blank')
  }
  // 指定公用CLodopJS文件
  function onloadCLodopJS() {
    bridgeVal.value = null
    bridgeList.value = []
    printerVal.value = null
    printerList.value = []
    Lodop = null
    if (!printUrl.value.url) return
    let oscript: any = demoCreateCLodopJSscript(printUrl.value.url)
    oscript.onload = oscript.onreadystatechange = function () {
      if (!oscript.readyState || /loaded|complete/.test(oscript.readyState)) {
        // LODOP = getLodop()
        Lodop = CLODOP
        emit('getLodop', Lodop)
      }
      if (printUrl.value.type === 1) {
        createBridgeSelectList()
      } else {
        createPrinterList()
      }
    }
  }
  function createPrinterList() {
    // 获取打印机列表
    const counter = Lodop.GET_PRINTER_COUNT()
    for (let i = 0; i < counter; i++) {
      let name = Lodop.GET_PRINTER_NAME(i)
      printerList.value.push({
        name: name,
        value: i,
      })
    }
    printerVal.value = printerList.value[0]?.value
  }
  // 加载CLodopfuncs.js
  function demoCreateCLodopJSscript(strSrc: any) {
    let ScriptSS: any = document.getElementsByTagName('script')
    for (let i in ScriptSS) {
      if (ScriptSS[i] && ScriptSS[i].src && ScriptSS[i].src.indexOf('CLodopfuncs.js') >= 0) {
        if (ScriptSS[i].parentNode) ScriptSS[i].parentNode.removeChild(ScriptSS[i])
      }
    }
    let oscript: any = document.createElement('script')
    if (strSrc.indexOf('src=') >= 0) {
      strSrc = strSrc.match(/=[\',\"][^\',^\"].*(?=[\',\"])/i)
      strSrc = strSrc[0].slice(2)
    }
    oscript.src = strSrc
    let head = document.head || document.getElementsByTagName('head')[0] || document.documentElement
    head.insertBefore(oscript, head.firstChild)
    return oscript
  }
  // 设置端桥列表
  function createBridgeSelectList() {
    let strBridgesNameList = Lodop.Get_AOBridge_List('name')
    let strBridgessIDList = Lodop.Get_AOBridge_List('id')
    let NameOptions = []
    let IDOptions = []
    NameOptions = strBridgesNameList.split('\n')
    IDOptions = strBridgessIDList.split('\n')
    for (let i in IDOptions) {
      bridgeList.value.push({
        name: NameOptions[i],
        value: IDOptions[i] + ';' + NameOptions[i],
      })
    }
    bridgeVal.value = bridgeList.value[0]?.value
    createBridgeSubPrinterSelectList()
  }
  // 打印机列表
  function createBridgeSubPrinterSelectList() {
    printerList.value = []
    printerVal.value = null
    let strPrintersNameList = Lodop.Get_AOBridge_SubPrinters_List(bridgeVal.value, 'name')
    let strPrintersIDList = Lodop.Get_AOBridge_SubPrinters_List(bridgeVal.value, 'id')
    let NameOptions = []
    let IDOptions = []
    NameOptions = strPrintersNameList.split('\n')
    IDOptions = strPrintersIDList.split('\n')
    for (let i in NameOptions) {
      printerList.value.push({
        name: NameOptions[i],
        value: IDOptions[i],
      })
    }
    printerVal.value = printerList.value[0]?.value
  }
  // 获取断桥和打印机内容
  function getBridgeInfo() {
    return {
      type: printUrl.value.type,
      bridgeIDandName: bridgeVal.value,
      printerIndex: printerVal.value,
    }
  }
  defineExpose({ getBridgeInfo })
</script>
<style lang="less" scoped>
  .printer-w {
    color: #888;
    .arco-btn {
      font-size: 14px;
    }
    .bridge-label {
      margin-bottom: 10px;
    }
    select {
      line-height: 28px;
      height: 28px;
      background-color: #ffffff;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: inherit;
      outline: none;
      padding: 0 15px;
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
  }
  .printer-row {
    display: flex;
    align-items: center;
    .bridge-label {
      margin-bottom: 0;
      margin-right: 30px;
    }
  }
</style>
